<title>聊天窗口</title>

<link rel="stylesheet" href="/css/examples/components/structure/chat.css">

<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">聊天窗口</h1>
        <div class="page-header-actions">
            <form>
                <div class="input-search input-search-dark">
                    <i class="input-search-icon wb-search" aria-hidden="true"></i>
                    <input type="text" class="form-control" name="" placeholder="搜索...">
                </div>
            </form>
        </div>
    </div>
    <div class="page-content">

        <div class="panel">
            <div class="panel-body">
                <div class="chat-box">
                    <div class="chats">
                        <div class="chat">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="June Lane">
                                    <img src="/images/portraits/4.jpg" alt="June Lane">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>
                                        骚年，可以交个朋友吗？ </p>
                                    <time class="chat-time" datetime="2016-06-01T08:30">上午 8:30</time>
                                </div>
                            </div>
                        </div>
                        <div class="chat chat-left">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="Edward Fletcher">
                                    <img src="/images/portraits/5.jpg" alt="Edward Fletcher">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>
                                        我有女朋友了 </p>
                                    <time class="chat-time" datetime="2016-06-01T08:35">上午 8:35</time>
                                </div>
                            </div>
                        </div>
                        <div class="chat">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="June Lane">
                                    <img src="/images/portraits/4.jpg" alt="June Lane">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>
                                        那你介意再多交一个女朋友吗？ </p>
                                    <time class="chat-time" datetime="2016-06-01T08:40">上午 8:40</time>
                                </div>
                            </div>
                        </div>
                        <div class="chat chat-left">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="Edward Fletcher">
                                    <img src="/images/portraits/5.jpg" alt="Edward Fletcher">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>介意</p>
                                </div>
                            </div>
                        </div>
                        <div class="chat">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="June Lane">
                                    <img src="/images/portraits/4.jpg" alt="June Lane">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>那你介意我喜欢你吗？</p>
                                    <time class="chat-time" datetime="2016-06-01T09:00">上午 9:00</time>
                                </div>
                            </div>
                        </div>

                        <div class="chat chat-left">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="Edward Fletcher">
                                    <img src="/images/portraits/5.jpg" alt="Edward Fletcher">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>介意</p>
                                </div>
                            </div>
                        </div>

                        <div class="chat">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="June Lane">
                                    <img src="/images/portraits/4.jpg" alt="June Lane">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>那你介意介意你介意我吗？</p>
                                </div>
                            </div>
                        </div>

                        <div class="chat chat-left">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="Edward Fletcher">
                                    <img src="/images/portraits/5.jpg" alt="Edward Fletcher">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>介意</p>
                                    <p>不介……</p>
                                    <p>额</p>
                                    <p>艹</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <form class="margin-bottom-10">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="说点什么吧…">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button">发送</button>
                        </span>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
